import React, { useEffect, useRef, useState } from "react";

function RenderList() {
  const interRef = useRef(null);
  const [val, setVal] = useState("invisible");

  useEffect(() => {
    const ob = new IntersectionObserver((inter, oo) => {
      if (inter[0].isIntersecting) {
        setVal("visible");
        ob.disconnect();
      }
    });
    ob.observe(interRef.current);
  }, []);

  return (
    <div>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <h1>content</h1>
      <div ref={interRef}>Intersection {val}</div>
    </div>
  );
}

export default RenderList;
